<template>
    <div class="layout-content">
        <div class="layout-content-main">
            <Breadcrumb class="content-title mbt1">
                <BreadcrumbItem>组织机构管理</BreadcrumbItem>
            </Breadcrumb>

            <div class="section-special">
                <Row style="height:100%">
                    <!-- 左侧 -->
                    <Col span="6" class="section-left">

                    <Button type="primary" long class="mbt2 mtp2" @click="createDepartmentModal=true">创建部门</Button>

                        <el-input
                            placeholder="请输入部门名称"
                            v-model="filterText" class="mbt2">
                        </el-input>     

                        <el-tree
                            class="filter-tree"
                            :data="treeData"
                            :props="defaultProps"
                            :expand-on-click-node=false                            
                            :filter-node-method="filterNode"
                            ref="tree2" style="border:none" @node-click="treeItemClick">
                        </el-tree>
                    </Col>
                    <!-- 右侧 -->
                    <Col span="18-10px" class="section-right">

                    <Breadcrumb class="rightName mbt2">

                        <BreadcrumbItem>{{treeInfo.label}}</BreadcrumbItem>
                    </Breadcrumb>
                    <Row>

                        <Col span="6" class="pointer" @click.native="createChildrenFun">
                        <Icon type="plus-circled" class="create-icon"></Icon>
                        <span class="create-txt">创建子部门</span>

                        </Col>

                        <Col span="5" class="pointer" @click.native="editFun">
                        <!-- <Dropdown trigger="click">
                          v-if="this.treeInfo.departmentId" 
                            <button style="opacity:0"></button> 

                            <Icon type="more" class="more-icon"></Icon>
                            <span class="more-txt">更多</span>
                            <DropdownMenu slot="list">
                                <DropdownItem style="padding:20px 5px;overflow:hidden" @click.native="editModal=true">
                                    <Icon type="compose" class="more-icon"></Icon>
                                    <span class="more-txt">编辑</span>
                                    
                                </DropdownItem>
                                <DropdownItem style="padding:20px 5px;overflow:hidden" @click.native="remove">
                                    <Icon type="trash-a" class="more-icon"></Icon>
                                    <span class="more-txt">删除</span>
                                   
                                </DropdownItem>

                            </DropdownMenu>
                        </Dropdown> -->
                        <Icon type="compose" class="more-icon"></Icon>
                        <span class="more-txt">编辑</span>

                        </Col>
                    </Row>

                    </Col>

                </Row>

                <!-- 创建部门弹出框 start -->
                <Modal v-model="createDepartmentModal" title="创建部门">                   
                    <!-- <Input size="large" placeholder="请输入部门名称" v-model="departmentName.departmentName"></Input> -->
                     <Form ref="departmentName" :model="departmentName" :rules="ruleValidate"  :label-width="80">
                      <FormItem label="部门名称" prop="departmentName">
                          <Input size="large" :maxlength="15" placeholder="请输入部门名称" v-model="departmentName.departmentName"></Input>
                      </FormItem>
                    </Form>
                    <div slot="footer">
                          <Button @click="createDepartmentModal=false">取消</Button>
                          <Button type="primary" @click="saveDepartment('departmentName')">保存</Button>

                    </div>
                </Modal>
                <!-- 创建部门弹出框 end -->
                
                <!-- 创建子部门弹框start -->
                <Modal v-model="createChildrenModal" title="创建子部门">
                  
                    <!-- <Input size="large" placeholder="请输入部门名称" v-model="childrenData.departmentName"></Input> -->
                    <Form ref="childrenData" :model="childrenData" :rules="ruleValidate"  :label-width="80">
                      <FormItem label="部门名称" prop="departmentName">
                          <Input size="large" :maxlength="15" placeholder="请输入部门名称" v-model="childrenData.departmentName"></Input>
                      </FormItem>
                    </Form>
                    <div slot="footer">
                          <Button @click="createChildrenModal=false">取消</Button>
                          <Button type="primary" @click="saveDepartment('childrenData')">保存</Button>

                    </div>
                </Modal>
                <!-- 创建子部门弹框end -->

                <!-- 编辑弹框 start-->
                <Modal v-model="editModal" title="编辑">
                        
                         <!-- <Input size="large" placeholder="请输入部门名称" class="mbt2" v-model="editDeparment.departmentName"></Input>                                                             
                         <Select v-model="editDeparment.principalId" placeholder="请选择部门负责人">
                            <Option :value="item.userId" :key="item.userId" v-for="item in userList">{{item.userName}}</Option>
                            
                        </Select> -->
                  <Form ref="editDeparment" :model="editDeparment" :rules="ruleValidate"  :label-width="100">
                      <FormItem label="部门名称" prop="departmentName">
                          <Input size="large" placeholder="请输入部门名称" v-model="editDeparment.departmentName"></Input>
                           
                      </FormItem>
                       <FormItem label="部门负责人" prop="departmentName">
                      <Select v-model="editDeparment.principalId" placeholder="请选择部门负责人">
                              <Option :value="item.userId" :key="item.userId" v-for="item in userList">{{item.userName}}</Option>

                            
                          </Select> 
                      </FormItem>
                    </Form>
                    <div slot="footer">
                          <Button @click="editModal=false">取消</Button>
                          <Button type="primary" @click="saveDepartment('editDeparment')">保存</Button>

                    </div>
                   
                </Modal>
                <!-- 编辑弹框end -->

              
            </div>
        </div>
    </div>
</template>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },
  mounted() {
    this.getTreeList();
  },
  data() {
    return {
      //fadeIn: false,

      filterText: "",
      treeData: [],
      createDepartmentModal: false,
      createChildrenModal: false,
      removeModal: false,
      editModal: false,
      userList: [],
      treeInfo: "",
      departmentName: { departmentName: "" },

      childrenData: {
        departmentName: "",
        parentId: ""
      },
      editDeparment: {
        departmentName: "",
        principalId: "",
        departmentId: ""
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      ruleValidate: {
        departmentName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {},
  methods: {
    getTreeList() {
      this.$ajax
        .post("/api/department/selectAllTree")
        .then(response => {
          // console.log(response.data);
          if (response.data.code == 1) {
            this.treeData = response.data.resdata;
          } else {
            this.$Modal.error({
              title: "错误",
              content: response.data.msg
            });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: response.data.msg
          });
        });
    },

    treeItemClick(data) {
      // console.log(data.label)
      this.treeInfo = data;
      //创建子部门部分
      this.childrenData.parentId = data.departmentId;
      //编辑部分
      this.editDeparment.departmentName = data.label;
      this.editDeparment.principalId = data.principalId;
      this.editDeparment.departmentId = data.departmentId;
      //根据部门id查询该部门的用户
      this.getDepartmentUser();
    },
    ok() {
      this.$Message.info("点击了确定");
    },
    cancel() {
      this.$Message.info("点击了取消");
    },

    rename() {
      //重命名
      this.$Message.info("点击了重命名");
    },
    //根据部门id查询人员
    getDepartmentUser() {
      this.$ajax
        .post(
          "/api/user/selectByDepartmentId",
          `departmentId=${this.treeInfo.departmentId}`
        )
        .then(response => {
          //  console.log(response.data)
          if (response.data.code == 1) {
            this.userList = response.data.resdata.list;
          } else {
            this.$Modal.error({
              title: "错误",
              content: response.data.msg
            });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });
    },
    //创建子部门前判断是否选择了父级部门
    createChildrenFun() {
      if (this.treeInfo.departmentId) {
        this.createChildrenModal = true;
      } else {
        this.$Modal.error({
          title: "错误",
          content: "请先选择部门!"
        });
      }
    },
    //编辑前的判断
    editFun() {
      if (this.treeInfo.departmentId) {
        this.editModal = true;
      } else {
        this.$Modal.error({
          title: "错误",
          content: "请先选择部门!"
        });
      }
    },
    saveDepartment(name) {
      if (name == "departmentName") {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.$ajax
              .post("/api/department/save", this.departmentName)
              .then(response => {
                //  console.log(response.data);
                if (response.data.code == 1) {
                  this.$Message.success(response.data.msg);
                  this.createDepartmentModal = false;
                  this.getTreeList();
                } else {
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                  });
                }
              })
              .catch(error => {
                this.$Modal.error({
                  title: "错误",
                  content: response.data.msg
                });
              });
          } else {
            //this.$Message.error("请完善表单信息!");
          }
        });
      } else if (name == "childrenData") {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.$ajax
              .post("/api/department/save", this.childrenData)
              .then(response => {
                //  console.log(response.data);
                if (response.data.code == 1) {
                  this.$Message.success(response.data.msg);
                  this.createChildrenModal = false;
                  // this.childrenData={}
                  this.getTreeList();
                } else {
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                  });
                }
              })
              .catch(error => {
                this.$Modal.error({
                  title: "错误",
                  content: response.data.msg
                });
              });
          } else {
           // this.$Message.error("请完善表单信息!");
          }
        });
      } else if (name == "editDeparment") {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.$ajax
              .post("/api/department/save", this.editDeparment)
              .then(response => {
                //  console.log(response.data);
                if (response.data.code == 1) {
                  this.$Message.success(response.data.msg);
                  this.editModal = false;
                  this.editDeparment = {};
                  this.getTreeList();
                } else {
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                  });
                }
              })
              .catch(error => {
                this.$Modal.error({
                  title: "错误",
                  content: response.data.msg
                });
              });
          } else {
           // this.$Message.error("请完善表单信息!");
          }
        });
      }
    },
    remove() {
      //删除
      this.$Modal.confirm({
        title: "确定要删除吗？",
        content: "<p>删除后将无法恢复 !</p>",
        onOk: () => {
          this.$ajax
            .post(
              "/api/department/delete",
              `departmentId=${this.treeInfo.departmentId}`
            )
            .then(response => {
              //  console.log(response.data);
              if (response.data.code == 1) {
                this.getTreeList();
              } else {
                this.$Modal.error({
                  title: "错误",
                  content: response.data.msg
                });
              }
            })
            .catch(error => {
              this.$Modal.error({
                title: "错误",
                content: response.data.msg
              });
            });
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>

<style>

</style>
